import { onMunted, onUnmounted, ref } from "vue";
export function useDrag() {
  const posoition = ref({ x: 0, y: 0 });
  const isDragging = ref(false);

  const onmMouseDown = (e: MouseEvent) => {
    isDragging.value = true;
    posoition.value = { x: e.clientX, y: e.clientY };
  };

  const onMouseMove = (e: MouseEvent) => {
    if (isDragging.value) {
      const deltaX = e.clientX - posoition.value.x;
      const deltaY = e.clientY - posoition.value.y;
      posoition.value = { x: e.clientX, y: e.clientY };
      document.documentElement.style.setProperty("--drag--x", `${deltaX}px`);
      document.documentElement.style.setProperty("--drag--y", `${deltaY}px`);
    }
  };

  const onMouseUp = (e: MouseEvent) => {
    isDragging.value = false;
  };

  onMunted(() => {
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
  });

  onUnmounted(() => {
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  });

  return { posoition, onmMouseDown };
}
